<template>
  <div class="app-container">
    <el-form :model="queryParams" :rules="rules" ref="queryRef" :inline="true" label-width="120px">
      <el-form-item label="事件编号" prop="eventCode">
        <el-input
            v-model="queryParams.eventCode"
            placeholder="请输入事件编号"
            clearable
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="事件类型" prop="eventTypeStr">
        <el-input
            v-model="queryParams.eventTypeStr"
            placeholder="请输入事件事件类型"
            clearable
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <div v-if="showSearch">
<!--        <el-form-item label="场景" prop="scene">-->
<!--          <el-input-->
<!--              v-model="queryParams.scene"-->
<!--              placeholder="请输入场景"-->
<!--              clearable-->
<!--              @keyup.enter="handleQuery"-->
<!--          />-->
<!--        </el-form-item>-->

<!--        <el-form-item label="设备序列号" prop="serialNumber">-->
<!--          <el-input-->
<!--              v-model="queryParams.serialNumber"-->
<!--              placeholder="请输入设备序列号"-->
<!--              clearable-->
<!--              @keyup.enter="handleQuery"-->
<!--          />-->
<!--        </el-form-item>-->
        <el-form-item label="设备编号" prop="deviceNumber">
          <el-input
              v-model="queryParams.deviceNumber"
              placeholder="请输入设备编号"
              clearable
              @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="辖区" prop="areaName">
          <el-input
              v-model="queryParams.areaName"
              placeholder="请输入区辖区"
              clearable
              @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input
              v-model="queryParams.address"
              placeholder="请输入地址"
              clearable
              @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="社区" prop="community">
          <el-input
              v-model="queryParams.community"
              placeholder="请输入社区"
              clearable
              @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="小区名称" prop="residentialName">
          <el-input
              v-model="queryParams.residentialName"
              placeholder="请输入小区名称"
              clearable
              @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="设备品牌" prop="deviceBrand">
          <el-input
              v-model="queryParams.deviceBrand"
              placeholder="请输入设备品牌"
              clearable
              @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="设备型号" prop="deviceModel">
          <el-input
              v-model="queryParams.deviceModel"
              placeholder="请输入设备型号"
              clearable
              @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="事件报警时间" prop="eventTime">
          <el-date-picker clearable
                          v-model="queryParams.eventTime"
                          type="datetimerange"
                          value-format="YYYY-MM-DD HH:mm:ss"
                          format="YYYY-MM-DD HH:mm:ss"
                          placeholder="请选择事件时间">
          </el-date-picker>
        </el-form-item>
      </div>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        <el-button
            type="warning"
            plain
            icon="Download"
            @click="handleExport"
            v-hasPermi="['wvp:surveillanceEvent:export']"
        >导出
        </el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <!--      <el-col :span="1.5">-->
      <!--        <el-button-->
      <!--          type="primary"-->
      <!--          plain-->
      <!--          icon="Plus"-->
      <!--          @click="handleAdd"-->
      <!--          v-hasPermi="['wvp:surveillanceEvent:add']"-->
      <!--        >新增</el-button>-->
      <!--      </el-col>-->
      <!--      <el-col :span="1.5">-->
      <!--        <el-button-->
      <!--          type="success"-->
      <!--          plain-->
      <!--          icon="Edit"-->
      <!--          :disabled="single"-->
      <!--          @click="handleUpdate"-->
      <!--          v-hasPermi="['wvp:surveillanceEvent:edit']"-->
      <!--        >修改</el-button>-->
      <!--      </el-col>-->
            <el-col :span="1.5">
              <el-button
                type="danger"
                plain
                icon="Delete"
                :disabled="single"
                @click="handleDelete"

                v-hasPermi="['wvp:surveillanceEvent:remove']"
              >删除</el-button>
            </el-col>
      <!--            <el-col :span="1.5">-->
      <!--                <el-button-->
      <!--                        type="warning"-->
      <!--                        plain-->
      <!--                        icon="Download"-->
      <!--                        @click="handleExport"-->
      <!--                        v-hasPermi="['wvp:surveillanceEvent:export']"-->
      <!--                >导出-->
      <!--                </el-button>-->
      <!--            </el-col>-->
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table ref="tableRef" :height="tableHeight" v-loading="loading" :data="surveillanceEventList"
              @selection-change="handleSelectionChange">
      <el-table-column min-width="120px" type="selection" width="55" align="center" fixed="left"/>
      <el-table-column min-width="120px" label="事件编号" align="center" prop="eventCode"  fixed="left"/>
      <el-table-column min-width="120px" label="设备编号" align="center" prop="deviceNumber"  fixed="left"/>
      <el-table-column min-width="120px" label="事件类型" align="center" prop="eventTypeStr"/>
<!--      <el-table-column min-width="120px" label="AI场景" align="center" prop="scene"/>-->
<!--      <el-table-column min-width="120px" label="事件描述" align="center" prop="eventTypeStr"/>-->
      <el-table-column min-width="120px" label="辖区" align="center" prop="areaName"/>
      <el-table-column min-width="120px" label="街道" align="center" prop="streetName"/>
      <el-table-column min-width="120px" label="社区" align="center" prop="community"/>
      <el-table-column min-width="120px" label="小区" align="center" prop="residentialName"/>
      <el-table-column min-width="220px" show-overflow-tooltip label="投放点名称" align="center" prop="deviceName"/>
<!--      <el-table-column min-width="120px" label="地址" align="center" prop="address"/>-->
      <el-table-column min-width="120px" label="事件图片" align="center" prop="picUrl">
        <template #default="scope">
          <!--          <img :src="scope.row.picUrl" width="100px;" height="100px" style="object-fit: contain"/>-->
          <el-image style="width: 100px; height: 100px" :src="scope.row.picUrl" @click="showPreview(scope.row)"
                    fit="contain" :z-index="99999" :preview-teleported="true"/>

<!--          <MyImage v-if="scope.row.picUrl" :img-url="scope.row.picUrl" :data="scope.row"></MyImage>-->
        </template>
      </el-table-column>
      <el-table-column min-width="120px" label="持续时间" align="center" prop="eventDurationTime">
      </el-table-column>
      <el-table-column min-width="120px" label="报警时间" align="center" prop="eventBeginTime" width="180">
      </el-table-column>
      <el-table-column min-width="120px" label="事件结束时间" align="center" prop="eventEndTime" width="180">
      </el-table-column>
      <el-table-column min-width="120px" label="处理时长" align="center" prop="processingTime"/>

      <el-table-column min-width="120px" label="处理人" align="center" prop="processingName"/>
      <el-table-column min-width="120px" label="处理状态" align="center" prop="processingStatus"/>
      <el-table-column min-width="120px" label="综合评分" align="center" prop="score"/>
      <el-table-column min-width="120px" label="处理意见" align="center" prop="opinion"/>
      <el-table-column min-width="120px" label="超时情况" align="center" prop="timeoutSituation"/>
      <el-table-column min-width="120px" label="是否及时处理" align="center" prop="timelyFlag">
        <template #default="scope">
          <span v-if="scope.row.timelyFlag === 0">否</span>
          <span v-else-if="!scope.row.timelyFlag"></span>
          <span v-else>是</span>
        </template>
      </el-table-column>
      <el-table-column min-width="120px" label="处理完成时间" align="center" prop="finishTime" width="180">
      </el-table-column>
    </el-table>

    <pagination
        v-show="total>0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"

    />

    <plugin-form ref="pluginFormRef" @close="close"></plugin-form>


    <pic-image  ref="preveiwImgRef" :showBox="showBox" >
                </pic-image>

  </div>
</template>

<script setup name="SurveillanceEvent">
import {modal} from "@/plugins/index";
import MyImage from "@/views/wvp/surveillanceEvent/components/MyImage.vue";
import PicImage from '@/components/PicImage/ImgPreview.vue'
const props = defineProps({
  surveillanceId: {
    type: Number
  }
})
import PluginForm from './components/Form.vue'
import {listSurveillanceEvent, getSurveillanceEvent, delSurveillanceEvent} from "@/api/wvp/surveillanceEvent";
// import {getEventList} from "@/api/wvp/surveillance";
import {useRoute} from "vue-router"
import {getConfigKey} from "@/api/system/config";

const route = useRoute();
const pluginFormRef = ref({
  eventTime: []
})
const {proxy} = getCurrentInstance();

const surveillanceEventList = ref([]);

const loading = ref(true);
const showSearch = ref(false);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const preveiwInfo = ref({
  picUrl:"",
  imgLocation:"",
  imgWidth:5,
  imageHeight:5
})
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    eventCode: null,
    eventDurationTime: null,
    eventBeginTime: null,
    eventEndTime: null,
    picUrl: null,
    localPicUrl: null,
    imgWidth: null,
    imageHeight: null,
    eventType: null,
    imgLocation: null,
    surveillanceId: null
  },
});
const {queryParams} = toRefs(data);
const rules = ref({
  eventTime: [

  ],
})


/** 查询ai摄像头事件列表 */
function getList() {
  loading.value = true;
  if (props.surveillanceId) {
    queryParams.value.surveillanceId = props.surveillanceId;
  }
  // if (!queryParams.value.eventTime || queryParams.value.eventTime.length < 1) {
  //   modal.alertWarning("请选择事件时间!")
  //   return;
  // }
  if (queryParams.value.eventTime && queryParams.value.eventTime.length > 1) {
    queryParams.value.eventStartTime = queryParams.value.eventTime[0];
    queryParams.value.eventStopTime = queryParams.value.eventTime[1];
  }else {
    queryParams.value.eventStartTime = "";
    queryParams.value.eventStopTime = "";
  }

  listSurveillanceEvent(queryParams.value).then(response => {
    surveillanceEventList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}


/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();

}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}


/** 新增按钮操作 */
function handleAdd() {

  pluginFormRef.value.begin(false);
}


/** 修改按钮操作 */
function handleUpdate(row) {
  const _id = row.id || ids.value
  pluginFormRef.value.begin(_id)
}

// 关闭刷新页面
function close(reset = false) {
  if (reset) {
    resetQuery()
  } else {
    getList()
  }
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _ids = row.id || ids.value;
  debugger
  var item = (surveillanceEventList.value).find(item => item.id === _ids[0]);
  let eventCode=item.eventCode
  proxy.$modal.confirm('是否确认删除事件编号为"' + eventCode + '"的数据项？').then(function () {
    return delSurveillanceEvent(_ids);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {
  });
}


/** 导出按钮操作 */
function handleExport() {
  proxy.download('wvp/surveillanceEvent/export', {
    ...queryParams.value
  }, `surveillanceEvent_${new Date().getTime()}.xlsx`)
}

const formatDateTime = (date, format = 'YYYY-MM-DD HH:mm:ss') => {
  const padStart = (value) => (value + '').padStart(2, '0');
  const months = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
  const days = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'];

  const year = date.getFullYear();
  const month = months[date.getMonth()];
  const day = days[date.getDate() - 1];
  const hour = padStart(date.getHours());
  const minute = padStart(date.getMinutes());
  const second = padStart(date.getSeconds());

  return format
      .replace('YYYY', year)
      .replace('MM', month)
      .replace('DD', day)
      .replace('HH', hour)
      .replace('mm', minute)
      .replace('ss', second);
};
const initEventDateTime = () => {
  const now = new Date();
  const todayEnd = formatDateTime(now);

  now.setHours(0, 0, 0, 0); // 设置当天开始时间为0点
  const todayStart = formatDateTime(now);


  // queryParams.value.eventTime = [todayStart, todayEnd]
}
onMounted(() => {
  handleResize()
  initEventDateTime()
  getList();
})
onActivated(()=>{
  nextTick(()=>{
    handleResize();
  })
})
const screenHeight = ref(window.innerHeight);
const tableHeight = ref(10);
const tableRef = ref();

function handleResize() {
  screenHeight.value = window.innerHeight;
  tableHeight.value = screenHeight.value - tableRef.value.$el.getBoundingClientRect().top - 80;
}

onMounted(() => {
  window.addEventListener('resize', handleResize);
});
onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});




const preveiwImgRef =ref(null)
const showPreview=(row)=>{
  preveiwImgRef.value.show(row);
}

const showBox = ref(true);
onActivated(()=>{
  getConfigKey("event-show-box-red").then(res => {
    showBox.value = res.msg;
    console.log(showBox.value,"-->")
  })
})

</script>
<style  >
>>> .pagination-container .el-pagination {
  right: 40px !important;

}

>>> .pagination-container {
  margin-top: 0 !important;
}
.pagination-container{
  margin-top: 0!important;
}
</style>
